<template>
  
    <div>
        <h1>3----首页</h1>

        <p>欢迎登陆：{{ name }}</p>


        <p v-for="(student, index) in student_li" :key="index"> 
            
            {{ student.id }} ----
            {{ student.name }} ----
            {{ student.age }} ----
            <img :src="'http://127.0.0.1:8000/' +student.img" alt=""> ----
            {{ student.teacher.name }}

        </p>

        <el-pagination 
            :total="total"
            :page-size="2"
            @current-change='fanye'
        >


        </el-pagination>


    </div>


</template>

<script>
import axios from 'axios'

export default {

    // 1. 数据
    data() {
        return {
            name: sessionStorage.getItem('name'),  // 获取name
            id: sessionStorage.getItem('id'),  // 获取id
            total: 0,
            student_li: []
        }
    },


    // 2. 方法
    methods: {
        fanye(val){
            // console.log(val, '--------------')
            axios({
                url: 'http://127.0.0.1:8000/demo/student/?id=' + this.id + '&page=' + val,
                method: 'get'
            }).then(res => {
                console.log(res.data)
                this.total = res.data.total
                this.student_li = res.data.student_li
            })
        }
    },


    // 2. 钩子函数
    created() {
        // console.log(this.id, '----------------')
        axios({
            url: 'http://127.0.0.1:8000/demo/student/?id=' + this.id,
            method: 'get'
        }).then(res => {
            console.log(res.data)
            this.total = res.data.total
            this.student_li = res.data.student_li
        })
    },



}
</script>


<style>

</style>

